import { ref, onMounted, onUnmounted } from 'vue'

// 图片占位符
const placeholderImage = 'https://via.placeholder.com/800x600?text=Image+Coming+Soon'

// 通用数据
const commonData = {
  social: {
    facebook: 'https://facebook.com/company',
    twitter: 'https://twitter.com/company',
    linkedin: 'https://linkedin.com/company',
    instagram: 'https://instagram.com/company'
  },
  contact: {
    email: 'contact@company.com',
    phone: '+1 (555) 123-4567',
    address: '123 Business Street, Tech City, TC 12345'
  }
}

// 首页数据
const homeData = {
  hero: {
    title: '创新技术解决方案',
    subtitle: '为企业提供专业的技术服务与支持',
    cta: '了解更多',
    background: '/images/hero-bg.jpg' || placeholderImage
  },
  features: [
    {
      icon: 'IconInnovation',
      title: '技术创新',
      description: '采用最新技术栈，保持技术领先优势',
      image: '/images/features/innovation.jpg' || placeholderImage
    },
    {
      icon: 'IconQuality',
      title: '品质保证',
      description: '严格的质量管理，确保项目交付质量',
      image: '/images/features/quality.jpg' || placeholderImage
    },
    {
      icon: 'IconService',
      title: '优质服务',
      description: '24/7 技术支持，快速响应客户需求',
      image: '/images/features/service.jpg' || placeholderImage
    },
    {
      icon: 'IconSolution',
      title: '解决方案',
      description: '提供完整的技术解决方案',
      image: '/images/features/solution.jpg' || placeholderImage
    }
  ],
  services: [
    {
      title: 'Web 开发',
      description: '专业的网站开发服务，包括前端和后端开发',
      image: '/images/services/web.jpg' || placeholderImage,
      features: ['响应式设计', 'SEO优化', '性能优化', '安全防护']
    },
    {
      title: '移动应用开发',
      description: 'iOS 和 Android 原生应用开发',
      image: '/images/services/mobile.jpg' || placeholderImage,
      features: ['原生开发', '跨平台开发', '应用上架', '应用维护']
    },
    {
      title: '云服务解决方案',
      description: '云架构设计和部署服务',
      image: '/images/services/cloud.jpg' || placeholderImage,
      features: ['云迁移', '负载均衡', '安全加密', '数据备份']
    }
  ],
  stats: [
    { number: '100+', label: '成功项目', icon: 'IconProject' },
    { number: '50+', label: '企业客户', icon: 'IconClient' },
    { number: '10+', label: '服务年限', icon: 'IconClock' },
    { number: '24/7', label: '技术支持', icon: 'IconSupport' }
  ],
  testimonials: [
    {
      name: '张总',
      company: 'ABC科技',
      content: '与团队合作非常愉快，技术实力强，服务态度好',
      avatar: '/images/testimonials/1.jpg' || placeholderImage
    },
    {
      name: '李经理',
      company: 'XYZ集团',
      content: '项目交付及时，质量有保证，是值得信赖的合作伙伴',
      avatar: '/images/testimonials/2.jpg' || placeholderImage
    }
  ],
  ...commonData
}

// 关于我们页面数据
const aboutData = {
  hero: {
    title: '关于我们',
    subtitle: '专注技术创新，助力企业发展',
    background: '/images/about/hero-bg.jpg' || placeholderImage
  },
  story: {
    title: '我们的故事',
    content: '我们是一家充满激情的技术公司，致力于为客户提供最优质的解决方案。多年来，我们不断创新，始终保持技术领先，为众多企业提供了专业的技术支持和服务。',
    image: '/images/about/story.jpg' || placeholderImage
  },
  mission: {
    title: '使命与价值观',
    items: [
      {
        title: '创新',
        content: '持续创新，引领技术发展'
      },
      {
        title: '品质',
        content: '追求卓越，保证服务品质'
      },
      {
        title: '责任',
        content: '诚信经营，承担社会责任'
      }
    ]
  },
  achievements: [
    {
      year: '2020',
      title: '成立公司，开启创业征程'
    },
    {
      year: '2021',
      title: '完成A轮融资，加速业务发展'
    },
    {
      year: '2022',
      title: '客户数量突破100家'
    },
    {
      year: '2023',
      title: '技术团队扩展至50人'
    }
  ]
}

// 团队页面数据
const teamData = {
  hero: {
    title: '我们的团队',
    subtitle: '专业的技术团队，为您提供优质的服务',
    background: '/images/team/hero-bg.jpg' || placeholderImage
  },
  leadership: {
    title: '领导团队',
    description: '经验丰富的管理团队，引领公司发展',
    members: [
      {
        name: '王总经理',
        position: 'CEO',
        bio: '20年技术管理经验，曾就职于多家知名科技公司',
        image: '/images/team/ceo.jpg' || placeholderImage,
        social: {
          linkedin: 'https://linkedin.com/in/ceo',
          twitter: 'https://twitter.com/ceo'
        }
      },
      {
        name: '张技术总监',
        position: 'CTO',
        bio: '15年技术开发经验，精通多种编程语言和框架',
        image: '/images/team/cto.jpg' || placeholderImage,
        social: {
          linkedin: 'https://linkedin.com/in/cto',
          github: 'https://github.com/cto'
        }
      }
    ]
  },
  departments: [
    {
      name: '研发部',
      description: '负责核心技术研发和创新',
      members: [
        {
          name: '李工程师',
          position: '高级开发工程师',
          image: '/images/team/dev1.jpg' || placeholderImage
        },
        {
          name: '赵工程师',
          position: '前端开发工程师',
          image: '/images/team/dev2.jpg' || placeholderImage
        }
      ]
    },
    {
      name: '设计部',
      description: '负责用户界面和用户体验设计',
      members: [
        {
          name: '刘设计师',
          position: 'UI/UX设计师',
          image: '/images/team/designer1.jpg' || placeholderImage
        }
      ]
    }
  ],
  culture: {
    title: '企业文化',
    values: [
      {
        title: '创新',
        description: '持续追求技术创新',
        icon: 'IconInnovation'
      },
      {
        title: '协作',
        description: '团队协作，共同进步',
        icon: 'IconCollaboration'
      },
      {
        title: '成长',
        description: '注重个人与团队成长',
        icon: 'IconGrowth'
      }
    ]
  },
  ...commonData
}

// 服务页面数据
const servicesData = {
  hero: {
    title: '我们的服务',
    subtitle: '为您提供全方位的技术解决方案',
    background: '/images/services/hero-bg.jpg' || placeholderImage
  },
  categories: [
    {
      title: 'Web开发',
      description: '专业的网站开发服务',
      image: '/images/services/web-dev.jpg' || placeholderImage,
      features: [
        '响应式设计',
        'SEO优化',
        '性能优化',
        '安全防护'
      ],
      technologies: ['Vue.js', 'React', 'Node.js', 'PHP'],
      details: {
        overview: '我们提供专业的Web应用开发服务，从企业官网到复杂的Web应用系统。',
        includes: [
          '需求分析和原型设计',
          '前端界面开发',
          '后端系统开发',
          '数据库设计与优化',
          '系统测试和部署',
          '性能优化和维护'
        ],
        cases: [
          {
            title: '企业管理系统',
            description: '为大型制造企业开发的综合管理系统',
            image: '/images/cases/erp.jpg' || placeholderImage
          },
          {
            title: '电商平台',
            description: '支持多商户的电商交易平台',
            image: '/images/cases/ecommerce.jpg' || placeholderImage
          }
        ]
      }
    },
    {
      title: '移动应用开发',
      description: 'iOS和Android应用开发',
      image: '/images/services/mobile-dev.jpg' || placeholderImage,
      features: [
        '原生开发',
        '跨平台开发',
        '应用上架',
        '应用维护'
      ],
      technologies: ['Swift', 'Kotlin', 'React Native', 'Flutter'],
      details: {
        overview: '提供专业的移动应用开发服务，覆盖iOS和Android平台。',
        includes: [
          'UI/UX设计',
          '原生应用开发',
          '跨平台应用开发',
          '应用测试和优化',
          '应用商店发布',
          '运营维护支持'
        ],
        cases: [
          {
            title: '社交应用',
            description: '集图片分享和社交于一体的移动应用',
            image: '/images/cases/social.jpg' || placeholderImage
          },
          {
            title: '企业办公',
            description: '移动端企业办公协作平台',
            image: '/images/cases/office.jpg' || placeholderImage
          }
        ]
      }
    },
    {
      title: '云服务解决方案',
      description: '云架构设计和部署服务',
      image: '/images/services/cloud.jpg' || placeholderImage,
      features: [
        '云迁移',
        '负载均衡',
        '安全加密',
        '数据备份'
      ],
      technologies: ['AWS', 'Azure', 'Google Cloud', '阿里云'],
      details: {
        overview: '提供完整的云服务解决方案，帮助企业实现云端转型。',
        includes: [
          '云架构设计',
          '云迁移服务',
          '容器化部署',
          '微服务架构',
          '监控和运维',
          '安全防护'
        ],
        cases: [
          {
            title: '混合云架构',
            description: '大型企业的混合云解决方案',
            image: '/images/cases/hybrid-cloud.jpg' || placeholderImage
          },
          {
            title: '微服务改造',
            description: '传统系统的微服务架构改造',
            image: '/images/cases/microservice.jpg' || placeholderImage
          }
        ]
      }
    }
  ],
  process: {
    title: '服务流程',
    description: '规范的服务流程确保项目顺利进行',
    steps: [
      {
        title: '需求分析',
        description: '深入了解客户需求',
        icon: 'IconAnalysis',
        details: '与客户充分沟通，理解业务需求和技术要求'
      },
      {
        title: '方案设计',
        description: '制定详细解决方案',
        icon: 'IconDesign',
        details: '根据需求制定技术方案和项目计划'
      },
      {
        title: '开发实施',
        description: '专业团队开发实施',
        icon: 'IconDevelopment',
        details: '按计划进行开发，定期同步进度'
      },
      {
        title: '测试部署',
        description: '严格测试和部署',
        icon: 'IconDeployment',
        details: '进行全面测试，确保系统稳定可靠'
      },
      {
        title: '维护支持',
        description: '持续的技术支持',
        icon: 'IconSupport',
        details: '提供长期的技术支持和系统维护'
      }
    ]
  },
  ...commonData
}

// 项目案例页面数据
const projectsData = {
  hero: {
    title: '项目案例',
    subtitle: '我们的成功案例展示',
    background: '/images/projects/hero-bg.jpg' || placeholderImage
  },
  categories: [
    {
      name: '企业应用',
      description: '企业级应用解决方案',
      projects: [
        {
          title: '智能制造ERP系统',
          client: '某大型制造企业',
          description: '基于云架构的现代化ERP系统，实现企业资源管理数字化转型',
          image: '/images/projects/erp.jpg' || placeholderImage,
          technologies: ['Vue.js', 'Node.js', 'MongoDB'],
          features: [
            '生产计划管理',
            '库存管理',
            '采购管理',
            '销售管理',
            '财务管理'
          ],
          results: [
            '提升生产效率30%',
            '降低库存成本20%',
            '优化业务流程'
          ]
        },
        {
          title: '企业协同办公平台',
          client: '某科技公司',
          description: '现代化的企业协同办公平台，支持远程办公和团队协作',
          image: '/images/projects/office.jpg' || placeholderImage,
          technologies: ['React', 'Spring Boot', 'MySQL'],
          features: [
            '项目管理',
            '文档协作',
            '即时通讯',
            '日程管理'
          ],
          results: [
            '提升团队协作效率',
            '降低沟通成本',
            '提高工作质量'
          ]
        }
      ]
    },
    {
      name: '电商平台',
      description: '电子商务解决方案',
      projects: [
        {
          title: '多商户电商平台',
          client: '某商业集团',
          description: '支持多商户入驻的综合电商交易平台',
          image: '/images/projects/ecommerce.jpg' || placeholderImage,
          technologies: ['Vue.js', 'Spring Cloud', 'MySQL'],
          features: [
            '商户管理',
            '订单管理',
            '支付系统',
            '库存管理'
          ],
          results: [
            '平台交易额突破1亿',
            '入驻商户超过1000家',
            '用户满意度95%'
          ]
        }
      ]
    },
    {
      name: '移动应用',
      description: '移动端解决方案',
      projects: [
        {
          title: '社交媒体应用',
          client: '某互联网公司',
          description: '年轻化的社交媒体平台，支持短视频和图文分享',
          image: '/images/projects/social.jpg' || placeholderImage,
          technologies: ['React Native', 'Node.js', 'MongoDB'],
          features: [
            '短视频分享',
            '社交互动',
            '实时通讯',
            '内容推荐'
          ],
          results: [
            '月活用户突破100万',
            '日均视频上传量10万+',
            '用户增长率300%'
          ]
        }
      ]
    }
  ],
  testimonials: [
    {
      name: '张总',
      position: 'CEO',
      company: '某制造企业',
      content: '项目团队专业能力强，服务态度好，按时保质完成了项目交付。',
      avatar: '/images/testimonials/1.jpg' || placeholderImage
    },
    {
      name: '李经理',
      position: 'CTO',
      company: '某科技公司',
      content: '技术团队反应迅速，解决方案专业，是值得信赖的合作伙伴。',
      avatar: '/images/testimonials/2.jpg' || placeholderImage
    }
  ],
  ...commonData
}

// 联系我们页面数据
const contactData = {
  hero: {
    title: '联系我们',
    subtitle: '随时与我们取得联系，我们将为您提供专业的服务'
  },
  contactInfo: [
    {
      icon: 'IconLocation',
      title: '地址',
      content: '上海市浦东新区张江高科技园区科苑路88号'
    },
    {
      icon: 'IconPhone',
      title: '电话',
      content: '+86 021-12345678'
    },
    {
      icon: 'IconEmail',
      title: '邮箱',
      content: 'contact@example.com'
    },
    {
      icon: 'IconClock',
      title: '工作时间',
      content: '周一至周五 9:00-18:00'
    }
  ]
}

// 页面元数据
const metaData = {
  home: {
    title: '首页',
    description: '专业的技术服务提供商 - 为企业提供创新的技术解决方案'
  },
  about: {
    title: '关于我们',
    description: '了解我们的故事、使命和价值观'
  },
  team: {
    title: '团队',
    description: '专业的技术团队 - 为您提供优质服务'
  },
  services: {
    title: '服务',
    description: '查看我们提供的技术服务和解决方案'
  },
  contact: {
    title: '联系我们',
    description: '联系我们获取更多信息和支持'
  }
}

// 统一的数据获取hook
export function usePageData(pageName) {
  const pageData = ref(null)
  const loading = ref(true)
  const error = ref(null)

  // 模拟异步数据加载
  const loadData = async () => {
    try {
      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, Math.floor(Math.random() * (500 - 100 + 1) + 100)))

      switch (pageName.toLowerCase()) {
        case 'home':
          pageData.value = { ...homeData, ...commonData }
          break
        case 'about':
          pageData.value = { ...aboutData, ...commonData }
          break
        case 'team':
          pageData.value = { ...teamData, ...commonData }
          break
        case 'services':
          pageData.value = { ...servicesData, ...commonData }
          break
        case 'projects':
          pageData.value = { ...projectsData, ...commonData }
          break
        case 'contact':
          pageData.value = { ...contactData, ...commonData }
          break
        default:
          throw new Error(`Unknown page: ${pageName}`)
      }
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    loadData()
  })

  return {
    data: pageData,
    loading,
    error
  }
}

// 元数据设置hook
export function useMetaData(title, description) {
  // 设置页面标题
  document.title = `${title} - 公司名称`

  // 设置页面描述
  const metaDescription = document.querySelector('meta[name="description"]')
  if (metaDescription) {
    metaDescription.setAttribute('content', description)
  } else {
    const meta = document.createElement('meta')
    meta.name = 'description'
    meta.content = description
    document.head.appendChild(meta)
  }
}

export function useScrollPosition() {
  const scrollPosition = ref(0)

  const updatePosition = () => {
    scrollPosition.value = window.pageYOffset
  }

  onMounted(() => {
    window.addEventListener('scroll', updatePosition)
    updatePosition()
  })

  onUnmounted(() => {
    window.removeEventListener('scroll', updatePosition)
  })

  return {
    scrollPosition
  }
}
